<template>
  <div class="result_page">
    <!-- 导航 开始 -->
    <nav-bar title="查资质"></nav-bar>
    <!-- 导航 end -->

    <!-- 搜索框 开始 -->
    <div class="search_box">
      <img src="@/assets/images/inquire/search.png" class="img" alt="" />
      <div class="input_box">
        <input
          type="text"
          class="a_input"
          v-model="term"
          :placeholder="placeholder"
        />
      </div>
      <button class="btn" @click="onSearch">搜索</button>
    </div>
    <!-- 搜索框 end -->

    <!-- 菜单 开始 -->
    <div class="menu_box">
      <tab-menus
        v-model="menuActive"
        :list="menus"
        class="cer_menu"
        @change="onChange"
      ></tab-menus>
    </div>
    <!-- 菜单 end -->

    <!-- 医院 开始 -->
    <div class="hot_list" v-show="menuActive == 1">
      <template v-if="hospitalList && hospitalList.length">
        <SearchHospital
          class="cell"
          v-for="(item, index) in hospitalList"
          :key="index"
          :info="item"
          :hot="false"
        >
        </SearchHospital>
      </template>
      <no-data v-else></no-data>
    </div>
    <!-- 医院 end -->

    <!-- 医生 开始 -->
    <div class="hot_list" v-show="menuActive == 2">
      <template v-if="doctorList && doctorList.length">
        <SearchDoctor
          class="cell"
          v-for="(item, index) in doctorList"
          :key="index"
          :info="item"
          :hot="false"
        >
        </SearchDoctor>
      </template>
      <no-data v-else></no-data>
    </div>
    <!-- 医生 end -->

    <!-- 材料 开始 -->
    <div class="hot_list" v-show="menuActive == 3">
      <template v-if="materialList && materialList.length">
        <SearchMaterial
          class="cell"
          v-for="(item, index) in materialList"
          :key="index"
          :info="item"
          :hot="false"
        >
        </SearchMaterial>
      </template>
      <no-data v-else></no-data>
    </div>
    <!-- 材料 end -->
  </div>
</template>
<script>
import TabMenus from "@/components/menus/index.vue";
import SearchHospital from "@/components/hospital/search_hospital.vue";
import SearchDoctor from "@/components/doctor/search_doctor.vue";
import SearchMaterial from "@/components/material/index.vue";
import {
  GET_QUALIFICATION_HOSPITAL_SEARCH,
  GET_QUALIFICATION_DOCTOR_SEARCH,
  GET_QUALIFICATION_MATERIAL_SEARCH,
} from "@/http/interface";
export default {
  components: {
    TabMenus,
    SearchHospital,
    SearchDoctor,
    SearchMaterial,
  },
  data() {
    return {
      menus: [
        { name: "医院资质", id: 1 },
        { name: "医生资质", id: 2 },
        { name: "材料品牌", id: 3 },
      ],
      menuActive: 1,
      term: "",
      hospitalList: [],
      doctorList: [],
      materialList: [],
      placeholder: "输入你要查询的医院简称",
    };
  },
  head() {
    return {
      link: [{ ref: "canonical", href: `${this.$domain}/inquire/result` }],
    };
  },
  watchQuery: true,
  async asyncData({ query, $axios }) {
    let params = {
      pageNumber: 1,
      pageSize: 10000,
      term: decodeURI(query.term),
    };
    let hospitalList = [];
    let doctorList = [];
    let materialList = [];
    let placeholder = "输入你要查询的医院简称";

    // 医院资质
    if (query.type == 1) {
      let res = await $axios.get(GET_QUALIFICATION_HOSPITAL_SEARCH, {
        params: params,
      });
      let obj = res.data || {};
      hospitalList = obj.list || [];
      placeholder = "输入你要查询的医院简称";
    }

    // 医生资质
    if (query.type == 2) {
      let res = await $axios.get(GET_QUALIFICATION_DOCTOR_SEARCH, {
        params: params,
      });
      let obj = res.data || {};
      doctorList = obj.list || [];
      placeholder = "输入你要查询的医生名称";
    }

    // 材料资质
    if (query.type == 3) {
      let res = await $axios.get(GET_QUALIFICATION_MATERIAL_SEARCH, {
        params: params,
      });
      let obj = res.data || {};
      materialList = obj.list || [];
      placeholder = "输入你要查询的材料名称";
    }
    console.log(params);
    let term = query.term && query.term != "null" ? query.term : "";

    return {
      menuActive: Number(query.type),
      term: decodeURI(term),
      hospitalList,
      doctorList,
      materialList,
      placeholder,
    };
  },
  methods: {
    // 查询医院资质列表
    getHospital() {
      let oParams = {};
    },

    // 监听
    onChange(e) {
      let term = this.term;
      let query = {};
      query.term = encodeURI(term);
      query.type = e;
      this.$router.replace({
        path: "/inquire/result",
        query: query,
      });
    },

    // 搜索
    onSearch() {
      let term = this.term;
      let query = {};
      query.term = encodeURI(term);
      query.type = this.menuActive;
      this.$router.replace({
        path: "/inquire/result",
        query: query,
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/inquire/result.less";
</style>